<template>
<div class="w-full flex justify-center overflow-hidden">
    <div class="2xl:w-3/5 xl:w-4/5 md:w-full flex flex-col ">

        <div class="flex flex-col items-center ">
            <div class="md:text-3xl text-2xl md:py-12 py-5 px-5 w-full text-center bg-clinc-bg text-white md:text-gray-900 md:bg-white">{{state.topicDoc.title}}</div>
            <div class="content text-lg lg:px-32 md:px-20 " v-html="state.topicDoc.content"></div>
        </div>
        <Hr />
        <div class="text-lg my-5 mx-4 md:ml-24 lg:ml-36 text-justify tracking-widest text-gray-600 ">若要查看其他主题，请按页面顶部的“目录”或者在搜索栏中输入字词或短语。</div>
    </div>
</div>
</template>

<script lang="ts" setup>
import Hr from './smallComs/hr.vue'
import {  state } from "@utils/store";


</script>
<style lang="scss">
.content p {
    margin-bottom: 20px;
    line-height: 1.8rem;
    text-align: left ;
    padding: 15px;
}
.content p:nth-child(2n) {
    background-color: #eee;
}

.content table{
    display: flex;
    justify-content: center;
    padding: 15px;
    th {
        font-size: 1.5rem;
        padding-bottom: 10px;
    }
    td {
    border: 1px solid black;
}
} 
</style>